<template>
    <customNavigationBar title="可提现CBT转换" />

    <view class="page">
        <view class="inputBox">
            <view class="title">请输入CBT个数</view>

            <view class="input">
                <text>CBT</text>
                <input type="number" v-model.number="CBTNum" placeholder="请输入" />
                <text @click="allTransform">全部转换</text>
            </view>

            <view class="bottom">
                <span>可转化个数：{{ walletInfo?.cbtBalance }}个</span>
            </view>
        </view>
    </view>

    <view class="submit">
        <view @click="SubmitEvent">转换</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { financeApis } from '@/utils/apis';

const CBTNum = ref(null);

onShow(() => {
    getData();
});

const allTransform = () => {
    CBTNum.value = Math.floor(walletInfo.value?.cbtBalance);
};

const walletInfo = ref(null);
const getData = async () => {
    let res = await financeApis.getWalletInfo();
    walletInfo.value = res.data;
};

const SubmitEvent = async () => {
    if (CBTNum.value > walletInfo.value.cbtBalance) {
        uni.showModal({
            showCancel: false,
            content: '可转换CBT个数不足，已为您更改为最大可转换CBT值'
        });
        CBTNum.value = walletInfo.value.cbtBalance;
        return;
    }

    financeApis
        .CBTtoMoneySubmit({
            cbt: CBTNum.value
        })
        .then(() => {
            uni.showModal({
                showCancel: false,
                content: '转换成功'
            });
            CBTNum.value = null;
            getData();
        });
};
</script>
<style lang="scss">
page {
    background-color: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.page {
    padding: 24rpx;
    padding-bottom: 140rpx;
}
.popupBox {
    position: relative;
    width: 604rpx;
    height: 500rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .title {
        width: 100%;
        height: 80rpx;
        background: #ff6543;
        border-radius: 16rpx 16rpx 0rpx 0rpx;

        font-size: 32rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
    }

    .scrollBox {
        padding: 16rpx;
        width: 100%;
        height: 420rpx;

        .scrollView {
            height: 100%;
            width: 100%;

            font-size: 22rpx;
            color: #333333;
            line-height: 36rpx;
        }
    }

    .close {
        position: absolute;
        left: 50%;
        bottom: -92rpx;
        transform: translateX(-50%);

        image {
            width: 56rpx;
            height: 56rpx;
        }
    }
}

.inputBox {
    width: 100%;
    padding: 30rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .title {
        font-size: 32rpx;
        color: #333333;
    }
    .input {
        padding: 20rpx 0;
        display: flex;
        align-items: center;
        gap: 20rpx;
        border-bottom: 2rpx solid #e4e4e6;

        text {
            font-size: 48rpx;
            color: #333333;
            &:last-child {
                font-size: 24rpx;
                color: #2c72ff;
            }
        }

        input {
            flex: 1;
            font-size: 48rpx;
            color: #333333;
        }
        input::placeholder {
            color: #b3b3b3;
        }
    }
    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;

        span {
            font-size: 28rpx;
            color: #b3b3b3;
        }
        span:last-child {
            color: #333333;
        }
    }
}

.submit {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    padding: 30rpx 24rpx;
    background-color: #fff;
    view {
        width: 100%;
        height: 80rpx;
        background: #2c72ff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
    }
}
</style>
